import {Overlay} from "@framework/overlay/index.js";
import {SpectrumElement} from "@framework/tools/base/index.js";
import {html, css} from "@framework/tools/base";
import {LitElement} from "lit";
/*
* Overlay.open (
(owner: HTMLElement)， //打开覆盖的元素引用，"trigger"
(interaction: TriggerInteractions)， //打开覆盖的交互类型的类型
(overlayElement: HTMLElement)， //投影到覆盖层的元素，"content"
(options: OverlayOptions) //自定义覆盖的选项
）;
* */

/*(async () => {
    const button = document.createElement('button');
    button.id = "trigger";
    button.innerText = 'click';
    document.body.appendChild(button);
    const input = document.createElement("input");
    input.id = "content";
    input.type = "text";
    input.value = "overlay"
    document.body.appendChild(input);
    const trigger = document.querySelector('#trigger');
    const interaction = 'click';
    const content = document.querySelector('#content');
    const options = {
        offset: 0,
        placement: 'bottom',
    };
    console.log(trigger, content);
    const closeOverlay = await Overlay.open(
        trigger,
        interaction,
        content,
        options
    );
})();*/

class OverlayDemo1 extends SpectrumElement {
    static get styles() {
        return [
            super.styles,
            css`
              :host {
                height: 100%;
                width: 100%;
                --ac: ccc;
              }

              .tool {
                display: flex;
                justify-content: center;
                background: var(--ac);
                font-size: var(--font-size);
              }

              button {
                font-size: inherit;
              }
            `];
    }

    /**
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        setTimeout(() => {
            const trigger = this.shadowRoot.querySelector('#trigger');
            const interaction = 'click';
            const content = this.shadowRoot.querySelector('#content');
            const options = {
                offset: 0,
                placement: 'bottom',
            };

            console.log(this.shadowRoot);
            console.log(trigger, content);
            Overlay.open(
                trigger,
                interaction,
                content,
                options
            ).then(closeOverlay => {
                setTimeout(() => {
                    closeOverlay();
                },3000);
            });
        }, 2000);


    }

    render() {
        return html`
            <div class="tool">
                <button id="trigger">click</button>
            </div>
            <div id="content">
                <input type="text">
            </div>
        `
    }
}

customElements.define("spectrum-overlay-demo1", OverlayDemo1);
document.body.innerHTML = "<spectrum-overlay-demo1 style='height:800px;'></spectrum-overlay-demo1>";
